<template lang="html">
  <div class="">
    <div class="amine_top_blank">
      <img @click="zzzhan()" class="setbtn_img" src="../../static/setbtn.png" alt="">
      <div class="touxiang_user">
        <span><img src="../../static/suolong.jpg" alt=""></span>
        <label>{{ user_name }}</label>
        <div class="positionMessage">
          <img src="../../static/position.png" alt="">
          <span>{{ loction }}</span>
        </div>
      </div>
    </div>
    <div class="amine_middle_blank">
      <dl class="">
        <dt><img src="../../static/xiangqu.png" alt=""></dt>
        <dd @click="topage()">想去</dd>
      </dl>
      <dl class="">
        <dt><img src="../../static/chuxing.png" alt=""></dt>
        <dd>出行记录</dd>
      </dl>
      <dl class="">
        <dt><img src="../../static/kaquan.png" alt=""></dt>
        <dd>卡券</dd>
      </dl>
    </div>
    <div class="fengekuai"></div>
    <ul class="amine_bottom_blank">
      <li>
        <img src="../../static/dingdanCenter.png" alt="">
        <span>订单中心</span>
      </li>
      <div class="">
        <div class="nothinkba">
          <img src="../../static/dingdan_1.jpg" alt="">
          <img src="../../static/dingdan_2.jpg" alt="">
          <img src="../../static/dingdan_3.jpg" alt="">
          <img src="../../static/dingdan_4.jpg" alt="">
          <img src="../../static/dingdan_5.jpg" alt="">
          <img src="../../static/dingdan_6.jpg" alt="">
        </div>
        <div class="fengekuai"></div>
      </div>

      <li>
        <img src="../../static/foot.png" alt="">
        <span>我的足迹</span>
      </li>
      <li>
        <img src="../../static/share.png" alt="">
        <span>把凯撒旅游App分享给好友</span>
      </li>
    </ul>
    <div class="fengekuai"></div>
    <div class="luchukuai"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      user_name:'',
      loction:'未定位'
    }
  },
  methods:{
    zzzhan(){
      this.$router.push({name:'shezhi'})
    },
    topage(){
      this.$router.push({
        path:'/shoucang'
      })
    }
  },
  created(){
    // window.localStorage.getItem('user');
    this.user_name = window.localStorage.getItem("user");

    let this_=this;
    // console.log(this);
    var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: false,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                buttonPosition:'RB'
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //解析定位结果
        function onComplete(data) {
            var str=['定位成功'];
           //  str.push('经度：' + data.position.getLng());
           //  str.push('纬度：' + data.position.getLat());
           //  if(data.accuracy){
           //       str.push('精度：' + data.accuracy + ' 米');
           //  }//如为IP精确定位结果则没有精度信息
           //  str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
           //  this.loction = str.join('<br>');
          //  this_.loction = data.position.getLng()
            var geocoder;
            AMap.service('AMap.Geocoder',function(){//回调函数
                //实例化Geocoder
                geocoder = new AMap.Geocoder({
                    city: "010"//城市，默认：“全国”
                });
                //TODO: 使用geocoder 对象完成相关功能
            })
            //逆地理编码
            var lnglatXY=[data.position.getLng(), data.position.getLat()];//地图上所标点的坐标
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                   //获得了有效的地址信息:
                   //即，result.regeocode.formattedAddress
                   console.log(result);
                   this_.loction = result.regeocode.addressComponent.province;
                }else{
                   //获取地址失败
                   this_.loction = "定位失败";
                }
            });
        }
        //解析定位错误信息
        function onError(data) {
            this_.loction = '定位失败';
        }
  }
}
</script>

<style lang="css">
.touxiang_user img{
  width: 5rem;
  height: 5rem;
}
.positionMessage{
  background-color: #e9e9e9;
  /*width: 8rem;*/
  height: 2.5rem;
  margin-top: 2.5rem;
  float: right;
  border-radius: 1.25rem;
  margin-right: 1rem;
}
.positionMessage>img{
  width: 1.5rem;
  height: 1.5rem;
  float: left;
  margin-top: .5rem;
  margin-left: .5rem;
}
.positionMessage>span{
  color: gray;
  line-height: 2.5rem;
  float: left;
  margin-left: .5rem;
  margin-right: 1rem;
}
.luchukuai{
  width: 100%;
  height: 53px;
}
.nothinkba{
  width: 100%;
  height: 17rem;
  display: flex;
  flex-wrap: wrap;
}
.nothinkba>img{
  width: 24%;
  height: 8rem;
  border: 1px solid #e9e9e9;
}
.amine_bottom_blank>li img{
  width: 2rem;
  height: 2rem;
  float: left;
  margin-top: 1rem;
  margin-left: 1rem;
}
.amine_bottom_blank>li{
  height: 4rem;
  width: 100%;
  border-bottom: 1px solid lightgray;
}
.amine_bottom_blank span{
  line-height: 4rem;
  font-size: 1.5rem;
  float: left;
  margin-left: 1.5rem;
  text-align: left;
}
.fengekuai{
  width: 100%;
  height: 1rem;
  background-color: #e9e9e9;
}
.amine_top_blank{
  width: 100%;
  height: 15rem;
  background: url('../../static/fj.jpg') no-repeat;
  background-size: cover;
}
.setbtn_img{
  width: 2.5rem;
  height: 2.5rem;
  float: right;
  margin-right: .5rem;
  margin-top: .5rem;
}
.touxiang_user{
  float: left;
  width: 100%;
  height: 5rem;
  margin-top: 9.5rem;
}
.touxiang_user>label{
  font-size: 1.7rem;
  font-weight: bolder;
  float: left;
  height: 2.5rem;
  line-height: 2.5rem;
  margin-top: 2.5rem;
  margin-left: .5rem;
}
.touxiang_user>span{
  float: left;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: lightgray;
  margin-left: 1.5rem;
  overflow: hidden;
}
.amine_middle_blank img{
  width: 2.5rem;
  height: 2.5rem;
}
.amine_middle_blank dd{
  font-size: 1.2rem;
}
.amine_middle_blank dl{
  width: 33%;
  border-right: 1px solid lightgray;
}
.amine_middle_blank{
  width: 100%;
  display: flex;
  margin-top: 50px;
  border-bottom: 1px solid lightgray;
  padding-bottom: .4rem;
}
</style>
